<!doctype html>
<html lang="en">
<head>
	<title>Options</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/wijmo/jquery.wijmo.wijrating.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijrating.js" type="text/javascript"></script>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			$('#rating').wijrating();
		});

		function apply() {
			var o = $.extend(true, {}, $('#rating').data("wijrating").options);
			if ($("#min").val().length > 0) {
				o.min = parseFloat($("#min").val());
			}
			if ($("#max").val().length > 0) {
				o.max = parseFloat($("#max").val());
			}
			if ($("#count").val().length > 0) {
				o.count = parseFloat($("#count").val());
			}
			if ($("#split").val().length > 0) {
				o.split = parseFloat($("#split").val());
			}
			if ($("#totalValue").val().length > 0) {
				o.totalValue = parseFloat($("#totalValue").val());
			}
			if ($("#value").val().length > 0) {
				o.value = parseFloat($("#value").val());
			}
			o.disabled = $("#disabled").is(":checked");
			o.resetButton.disabled = $("#rb_disabled").is(":checked");
			if ($("#rb_hint").val().length > 0) {
				o.resetButton.hint = $("#rb_hint").val();
			}
			o.resetButton.position = $("#rb_position").val();
			o.orientation = $("#orientation").val();
			o.direction = $("#direction").val();
			o.ratingMode = $("#ratingMode").val();
			$('#rating').wijrating(o);
		}
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Options</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div class="cont">
				<div>select as init markup:</div>
				<div>
					<select id="rating">
						<option value="1">Below Average</option>
						<option value="2">Average</option>
						<option selected="selected" value="3">Above Average</option>
						<option value="4">Awesome</option>
						<option value="5">Epic</option>
					</select>
				</div>
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<div>min:<input type="text" id="min"/>max:<input type="text" id="max"/>split:<input type="text" id="split" /><br />
					count:<input type="text" id="count" />totalValue:<input type="text" id="totalValue"/>value:<input type="text" id="value"/><br />
					<input type="checkbox" id="disabled" /><label for="disabled" id="ldisabled">disabled</label><br />
					orientation:<select id="orientation"><option value="horizontal">horizontal</option><option value="vertical">vertical</option></select>
					direction:<select id="direction"><option value="normal">normal</option><option value="reversed">reversed</option></select>
					ratingMode:<select id="ratingMode"><option value="continuous">continuous</option><option value="single">single</option></select><br />
					resetButton: <input type="checkbox" id="rb_disabled" /><label for="rb_disabled" id="rbl_disabled">disabled</label>
						hint:<input type="text" id="rb_hint"/><select id="rb_position"><option value="leftOrTop">leftOrTop</option><option value="rightOrBottom">rightOrBottom</option></select>
					<input type="button" id="apply" onclick="apply()" value="apply" />
					
				</div>
				<div></div>
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
		</div>
	</div>
</body>
</html>
